<template>
  <div class="jmxq-box">
    <div><span class="Profile-List"></span>
      <span>居民详情</span>
      <span
        style="background-color: #3DD4A7;color: #fff;border-radius: 6px;padding: 4px 6px;font-size: 12px;display: inline-block;margin-left: 960px;cursor: pointer;"
        @click="gofxx(`/home/message`)">发消息</span>
    </div>
    <div class="card-box">
      <el-tabs type="border-card">
        <el-tab-pane label="健康档案">
          <el-descriptions title="居民信息" :column="4" direction="horizontal">
            <el-descriptions-item label="居民编号"> {{
              ResidentLabelList?.number
            }}</el-descriptions-item>
            <el-descriptions-item label="姓名"> {{ ResidentLabelList?.name
            }}</el-descriptions-item>
            <el-descriptions-item label="头像">
              <img :src="'http://127.0.0.1:3000/' + ResidentLabelList?.picture">
            </el-descriptions-item>
            <el-descriptions-item label="身份证号">
              {{ ResidentLabelList?.IDCard }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号码">
              {{ ResidentLabelList?.tel }}
            </el-descriptions-item>
            <el-descriptions-item label="现居地">
              {{ ResidentLabelList?.residenceAddress }}
            </el-descriptions-item>
            <el-descriptions-item label="登陆密码">-</el-descriptions-item>
            <el-descriptions-item label="行政区划">
              {{ ResidentLabelList?.district }}
            </el-descriptions-item>
            <el-descriptions-item label="居民标签">
              <el-tag style="margin: 5px;" size="large" v-for="item in ResidentLabelList?.labelArr"> {{ item.name
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="性别">
              {{ ResidentLabelList?.gender === 1 ? "女" : "男" }}
            </el-descriptions-item>
            <el-descriptions-item label="出生日期">
              {{ ResidentLabelList?.birthday }}
            </el-descriptions-item>
            <el-descriptions-item label="籍贯">
              {{ ResidentLabelList?.nativePlace }}
            </el-descriptions-item>
            <el-descriptions-item label="民族">{{ nationM }}</el-descriptions-item>
            <el-descriptions-item label="文化程度">
              {{ ResidentLabelList?.educationName }}
            </el-descriptions-item>
            <el-descriptions-item label="婚姻状况">
              {{ marriageM }}
            </el-descriptions-item>
            <el-descriptions-item label="职业">
              {{ ResidentLabelList?.career }}
            </el-descriptions-item>
            <el-descriptions-item label="工作单位">
              {{ ResidentLabelList?.workUnit }}
            </el-descriptions-item>
            <el-descriptions-item label="紧急联系人">
              {{ ResidentLabelList?.emergencyContact }}
            </el-descriptions-item>
            <el-descriptions-item label="联系人电话">
              {{ ResidentLabelList?.emergencyNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="户籍类型">{{ residenceM }}</el-descriptions-item>
            <el-descriptions-item label="费用类型">
              {{ expenseM }}
            </el-descriptions-item>
            <el-descriptions-item label="定点医疗单位">
              {{ ResidentLabelList?.designatedMedicalUnits }}
            </el-descriptions-item>
            <el-descriptions-item label="来源">
              {{ ResidentLabelList?.origin }}
            </el-descriptions-item>
          </el-descriptions>
          <hr style="border: 0.5px solid #eee;" />
          <el-descriptions title="健康信息" :column="4" direction="horizontal">
            <el-descriptions-item label="身高"> {{
              ResidentLabelList?.health.height
            }}cm</el-descriptions-item>
            <el-descriptions-item label="体重"> {{ ResidentLabelList?.health.weight
            }}kg</el-descriptions-item>
            <el-descriptions-item label="血型">
              {{ bloodtypeM }}
            </el-descriptions-item>
            <el-descriptions-item label="RH阴性">
              {{ ResidentLabelList?.health.rh === 0 ? "否" : "是" }}
            </el-descriptions-item>
            <el-descriptions-item label="过敏史">
              {{ ResidentLabelList?.health.allergyHistory === 0 ? "无" : "有" }}
            </el-descriptions-item>
            <el-descriptions-item label="既往史">
              {{ ResidentLabelList?.health.pastHistory === 0 ? "无" : "有" }}
            </el-descriptions-item>
            <el-descriptions-item label="就诊史">
              {{ ResidentLabelList?.health.medicalHistory === 0 ? "无" : "有" }}
            </el-descriptions-item>
            <el-descriptions-item label="家族病史">
              {{ ResidentLabelList?.health.familyHistory === 0 ? "无" : "有" }}
            </el-descriptions-item>
          </el-descriptions>
          <hr style="border: 0.5px solid #eee;" />
          <div class="jtcy-box">
            <el-descriptions title="家庭成员" :column="4" direction="horizontal">
              <el-descriptions-item>
                <template style="display: flex; ">
                  <el-card shadow="hover">
                    <template style="display: flex; justify-content: space-between;color: #999;">
                      <img
                        src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1575.jpg"
                        alt="" />
                      <div class="info" style="margin:0 20px;">
                        <p><span style="margin-right: 8px;color: #333;">李青</span>58岁</p>
                        <p>关系：父母</p>
                      </div>
                      <img
                        src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1576.png"
                        alt="" />
                    </template>
                  </el-card>
                  <el-card shadow="hover" style="margin-left: 20px;">
                    <template style="display: flex; justify-content: space-between;color: #999;">
                      <img
                        src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1575.jpg"
                        alt="" />
                      <div class="info" style="margin:0 20px;">
                        <p><span style="margin-right: 8px;color: #333">许仙</span>28岁</p>
                        <p>关系：夫妻离异</p>
                      </div>
                      <img
                        src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1576.png"
                        alt="" />
                    </template>
                  </el-card>
                </template>
              </el-descriptions-item>
            </el-descriptions>
            <hr style="border: 0.5px solid #eee;" />
          </div>
          <div style="padding: 20px 0 0 0;">
            <el-button type="primary">编辑档案信息</el-button>
            <el-button @click="goBack()">返回</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="健康记录">
          <!-- 弹出的表单 -->
          <el-dialog v-model="dialogFormVisible" style="width: 340px;font-size: 12px;" title="编辑健康记录">
            <el-form :model="form">
              <el-form-item label="数据类型" :label-width="formLabelWidth">
                <el-select v-model="form.type" clearable placeholder="全部" size="small">
                  <el-option v-for="item in datatypeList" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
              <el-form-item label="测量时间" :label-width="formLabelWidth">
                <el-date-picker v-model="form.date" type="datetime" style="width: 210px;" placeholder="请选择时间"
                  format="YYYY/MM/DD HH:mm:ss" />
              </el-form-item>
              <el-form-item label="数值" :label-width="formLabelWidth">
                <el-input v-model="form.num" placeholder="请输入" style="width: 210px;" autocomplete="off" />
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  确认
                </el-button>
              </span>
            </template>
          </el-dialog>
          <!-- 删除表单 -->
          <el-dialog v-model="dialogVisible" title="删除确认" width="30%" :before-close="handleClose">
            <span>删除后无法恢复，确定要删除此条记录吗？</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                  确认
                </el-button>
              </span>
            </template>
          </el-dialog>
          <!-- 体重 -->
          <el-card shadow="never">
            <div style="display: flex;">
              <div ref="weightebarChart" :style="{ width: '400px', height: '350px' }"></div>
              <div style="border-left: 1px solid #eee;padding: 10px;">
                <div style="font-size: 14px;">体重记录</div>
                <el-table :data="weightTab" stripe style="width: 600px;font-size: 12px;padding: 4px;">
                  <el-table-column prop="createTime" label="测量时间" align="center" width=180 />
                  <el-table-column prop="weight" label="数值（kg）" align="center" />
                  <el-table-column prop="weight" label="评估" align="center">
                    <template #default='{ row }'>
                      {{ row.weight < 40 ? '偏瘦' : row.weight > 40 && row.weight < 60 ? '健康' : '偏胖' }} </template>
                  </el-table-column>
                  <el-table-column label="数据来源" align="center">
                    用户记录
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template #default="scoped">
                      <el-button link type="primary" size="small" @click="bjtz(scoped.row)">编辑</el-button>
                      <el-button link type="danger" size="small" @click="dialogVisible = true">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>

          </el-card>
          <!-- 血糖 -->
          <el-card shadow="never" style="margin-top: 20px;">
            <div style="display: flex;">
              <div style="width: 400px;">
                <!-- 餐前餐后 -->
                <el-radio-group v-model="radio1" size="small" style="margin-left: 290px;">
                  <el-radio-button label="餐前" @click="cqClick" />
                  <el-radio-button label="餐后" @click="chClick" />
                </el-radio-group>
                <div ref="BloodSugarChartcqChart" :style="{ width: '400px', height: '350px' }">
                </div>
              </div>
              <div>
                <div style="border-left: 1px solid #eee;padding:0 10px;">
                  <el-radio-group v-model="radio2" size="small" style="margin-left: 480px;">
                    <el-radio-button label="餐前" @click="cqTabClick" />
                    <el-radio-button label="餐后" @click="chTabClick" />
                  </el-radio-group>
                  <div style="font-size: 14px;">血糖记录</div>
                  <el-table :data="BloodSugarTab" stripe style="width: 600px;font-size: 12px;padding: 4px;">
                    <el-table-column prop="createTime" label="测量时间" align="center" width=160 />
                    <el-table-column prop="bloodSugar" label="数值（mmol/L）" align="center" width="120" />
                    <el-table-column prop="bloodSugar" label="评估" align="center">
                      <template #default='{ row }'>
                        {{ row.bloodSugar < 3.9 ? '偏低' : row.bloodSugar > 3.9 && row.bloodSugar < 7.8 ? '正常' : '偏高' }}
                            </template>
                    </el-table-column>
                    <el-table-column label="数据来源" align="center">
                      用户记录
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                      <template #default="scoped">
                        <el-button link type="primary" size="small" @click="bjxt(scoped.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="dialogVisible = true">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-card>
          <!-- 血压 -->
          <el-card shadow="never" style="margin-top: 20px;">
            <div style="display: flex;">
              <div ref="BloodPressureChart" :style="{ width: '400px', height: '350px' }"></div>
              <div style="border-left: 1px solid #eee;padding: 10px;">
                <div style="font-size: 14px;">血压记录</div>
                <el-table :data="BloodPressureTab" stripe style="width: 600px;font-size: 12px;padding: 4px;">
                  <el-table-column prop="createTime" label="测量时间" align="center" width=180 />
                  <el-table-column prop="diastolic" label="数值（mmHg）" align="center" width=120>
                    <template #default='{ row }'>
                      {{ row.diastolic }}/{{ row.systolic }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="diastolic" label="评估" align="center">
                    <template #default='{ row }'>
                      {{ row.diastolic < 90 && row.systolic < 60 ? '低血压' : row.diastolic > 120 && row.systolic > 80
                        ?
                        '高血压' : '正常'
                      }} </template>
                  </el-table-column>
                  <el-table-column label="数据来源" align="center">
                    用户记录
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template #default="scoped">
                      <el-button link type="primary" size="small" @click="bjxy(scoped.row)">编辑</el-button>
                      <el-button link type="danger" size="small" @click="dialogVisible = true">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>

          </el-card>
          <!-- 心率 -->
          <el-card shadow="never" style="margin-top: 20px;">
            <div style="display: flex;">
              <div ref="HeartRatemmmChart" :style="{ width: '400px', height: '350px' }"></div>
              <div style="border-left: 1px solid #eee;padding: 10px;">
                <div style="font-size: 14px;">心率记录</div>
                <el-table :data="HeartRateTab" stripe style="width: 600px;font-size: 12px;padding: 4px;">
                  <el-table-column prop="createTime" label="测量时间" align="center" width=180 />
                  <el-table-column prop="heartRate" label="数值（bmp）" align="center" />
                  <el-table-column prop="heartRate" label="评估" align="center">
                    <template #default='{ row }'>
                      {{ row.heartRate < 60 ? '偏低' : row.weight > 60 && row.weight < 100 ? '正常' : '偏高' }} </template>
                  </el-table-column>
                  <el-table-column label="数据来源" align="center">
                    用户记录
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template #default="scoped">
                      <el-button link type="primary" size="small" @click="bjxl(scoped.row)">编辑</el-button>
                      <el-button link type="danger" size="small" @click="dialogVisible = true">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>

          </el-card>
          <div style="padding: 20px 0 0 0;">
            <el-button type="primary" @click="tjjkjl">添加健康记录</el-button>
            <el-button @click="goBack()">返回</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="签约信息">
          <el-descriptions title="当前签约信息" :column="4" direction="horizontal">
            <el-descriptions-item label="签约编号">
              {{ ServiceList.number }}
            </el-descriptions-item>
            <el-descriptions-item label="签约状态">
              {{ ServiceList.status === 0 ? '待审核' : ServiceList.status === 1 ? '待支付' : ServiceList.status === 2 ? '已驳回' :
                ServiceList.status === 3 ? '生效中' : '已过期' }}
            </el-descriptions-item>
            <el-descriptions-item label="签约机构">
              {{ arr1.organ?.name }}
            </el-descriptions-item>
            <el-descriptions-item label="签约团队">
              {{ ServiceList.team.name }}
            </el-descriptions-item>
            <el-descriptions-item label="签约医生">
              {{ arr1.doctor ? arr1.doctor.name : '' }}
            </el-descriptions-item>
            <el-descriptions-item label="服务包">
              {{ ServiceList.service.name }}
            </el-descriptions-item>
            <el-descriptions-item label="签约周期">
              {{ ServiceList.service.period }}年
            </el-descriptions-item>
            <el-descriptions-item label=" 费用">
              ￥{{ ServiceList.service.price }}
            </el-descriptions-item>
            <el-descriptions-item label=" 签约类型">
              {{ ServiceList.type }}
            </el-descriptions-item>
            <el-descriptions-item label=" 申请时间">
              {{ ServiceList.subscribeTime }}
            </el-descriptions-item>
            <el-descriptions-item label="生效日期">
              {{ ServiceList.takingEffectTime }}
            </el-descriptions-item>
            <el-descriptions-item label=" 签约备注">
              {{ ServiceList.notes }}
            </el-descriptions-item>
          </el-descriptions>
          <div style="font-size: 14px;">
            <p style="margin: 20px 0;">签约记录</p>
            <el-table :data="serviceLists" style="width: 100%;font-size: 12px;">
              <el-table-column prop="number" label="编号" align="center" width='130px' />
              <el-table-column label="签约机构" align="center" width='140px'>
                {{ arr1.organ.name }}
              </el-table-column>
              <el-table-column prop="team.name" label="签约医生团队" align="center" />
              <el-table-column prop="name" label="签约医生" align="center">
                {{ arr1?.doctor.name }}
              </el-table-column>
              <el-table-column prop="service.name" label="服务包" align="center" />
              <el-table-column prop="subscribeTime" label="申请时间" align="center" width='150px' />
              <el-table-column label="到期时间" align="center" width='150px'>
                {{ ServiceList.subscribeTime }}
              </el-table-column>
              <el-table-column prop="name" label="操作" align="center">
                <template #default="scope">
                  <el-button link type="primary" size="small"
                    @click="goqyxq(`/home/Agency/treatInfo?id=${scope.row.id}`)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="padding: 20px 0 0 0;">
              <el-button @click="goBack()">返回</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="服务记录">
          <div style="font-size: 12px;display: flex;">
            <div style="width: 180px;border-right: 1px solid #eee;position: relative;padding: 20px 0;">
              <span style="margin-left: 40px;">{{ status0?.submissionTime }}</span>
              <span style="position: absolute;top:4"><img
                  src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B1%85%E6%B0%91%E8%AF%A6%E6%83%85/alarm_u4519.png"
                  alt=""></span>
              <p
                style="margin-left: 90px;background-color:#FA746B ; border-radius: 14px;padding: 4px;color: white;text-align: center;width: 60px;">
                待审核</p>
            </div>
            <div style="padding: 0 20px;">
              <el-descriptions title="服务信息" :column="3" direction="horizontal">
                <el-descriptions-item label="服务编号">
                  {{ status0.number }}
                </el-descriptions-item>
                <el-descriptions-item label="服务状态">

                  {{ status0.status == 0 ? '待审核' : status0.status == 1 ? '待服务' : status0.status == 2 ? '已完成' : '已驳回' }}
                </el-descriptions-item>
                <el-descriptions-item label="服务机构  ">
                  {{ status0?.organ.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务团队">
                  {{ status0.team.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务医生">
                  {{ status0.doctor.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务包">
                  {{ status0.service.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务项目">
                  {{ status0.serviceItem.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务地点">
                  {{ status0.address === 0 ? '签约人家里' : '机构门诊' }}
                </el-descriptions-item>
                <el-descriptions-item label=" 服务来源">
                  居民申请
                </el-descriptions-item>
                <el-descriptions-item label=" 提交时间">
                  {{ status0.submissionTime }}
                </el-descriptions-item>
                <el-descriptions-item label="审核时间">
                  {{ status0.auditTime }}
                </el-descriptions-item>
                <el-descriptions-item label=" 审核人">
                  {{ status0.checkerId }}
                </el-descriptions-item>
                <el-descriptions-item label=" 服务时间">
                  {{ status0.finishTime }}-
                </el-descriptions-item>
                <el-descriptions-item label=" 服务备注  ">
                  {{ status0.notes }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div style="font-size: 12px;display: flex;">
            <div style="width: 180px;border-right: 1px solid #eee;position: relative;padding: 20px 0;">
              <span style="margin-left: 40px;">{{ status1?.submissionTime }}</span>
              <span style="position: absolute;top:4"><img
                  src="https://cdn7.axureshop.com/demo/1881228/images/%E5%B1%85%E6%B0%91%E8%AF%A6%E6%83%85/alarm_u4519.png"
                  alt=""></span>
              <p
                style="margin-left: 90px;background-color:#FA746B ; border-radius: 14px;padding: 4px;color: white;text-align: center;width: 60px;">
                待服务</p>
            </div>
            <div style="padding: 0 20px;">
              <el-descriptions title="服务信息" :column="3" direction="horizontal">
                <el-descriptions-item label="服务编号">
                  {{ status1.number }}
                </el-descriptions-item>
                <el-descriptions-item label="服务状态">

                  {{ status1.status == 0 ? '待审核' : status1.status == 1 ? '待服务' : status1.status == 2 ? '已完成' : '已驳回' }}
                </el-descriptions-item>
                <el-descriptions-item label="服务机构  ">
                  {{ status1?.organ.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务团队">
                  {{ status1.team.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务医生">
                  {{ status1.doctor.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务包">
                  {{ status1.service.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务项目">
                  {{ status1.serviceItem.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务地点">
                  {{ status1.address === 0 ? '签约人家里' : '机构门诊' }}
                </el-descriptions-item>
                <el-descriptions-item label=" 服务来源">
                  居民申请
                </el-descriptions-item>
                <el-descriptions-item label=" 提交时间">
                  {{ status1.submissionTime }}
                </el-descriptions-item>
                <el-descriptions-item label="审核时间">
                  {{ status1.auditTime }}
                </el-descriptions-item>
                <el-descriptions-item label=" 审核人">
                  {{ status1.checkerId }}
                </el-descriptions-item>
                <el-descriptions-item label=" 服务时间">
                  {{ status1.finishTime }}-
                </el-descriptions-item>
                <el-descriptions-item label=" 服务备注  ">
                  {{ status1.notes }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div style="font-size: 12px;display: flex;">
            <div style="width: 180px;border-right: 1px solid #eee;position: relative;padding: 20px 0;">
              <span style="margin-left: 40px;">{{ status2?.submissionTime }}</span>
              <span style="position: absolute;top:4"><img
                  src="	https://cdn7.axureshop.com/demo/1881228/images/%E5%B1%85%E6%B0%91%E8%AF%A6%E6%83%85/u4520.png"
                  alt=""></span>
              <p
                style="margin-left: 90px;background-color:#3DD4A7 ; border-radius: 14px;padding: 4px;color: white;text-align: center;width: 60px;">
                已完成</p>
            </div>
            <div style="padding: 0 20px;">
              <el-descriptions title="服务信息" :column="3" direction="horizontal">
                <el-descriptions-item label="服务编号">
                  {{ status2.number }}
                </el-descriptions-item>
                <el-descriptions-item label="服务状态">

                  {{ status2.status == 0 ? '待审核' : status2.status == 1 ? '待服务' : status2.status == 2 ? '已完成' : '已驳回' }}
                </el-descriptions-item>
                <el-descriptions-item label="服务机构  ">
                  {{ status2?.organ.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务团队">
                  {{ status2.team.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务医生">
                  {{ status2.doctor.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务包">
                  {{ status2.service.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务项目">
                  {{ status2.serviceItem.name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务地点">
                  {{ status2.address === 0 ? '签约人家里' : '机构门诊' }}
                </el-descriptions-item>
                <el-descriptions-item label=" 服务来源">
                  居民申请
                </el-descriptions-item>
                <el-descriptions-item label=" 提交时间">
                  {{ status2.submissionTime }}
                </el-descriptions-item>
                <el-descriptions-item label="审核时间">
                  {{ status2.auditTime }}
                </el-descriptions-item>
                <el-descriptions-item label=" 审核人">
                  {{ status2.checkerId }}
                </el-descriptions-item>
                <el-descriptions-item label=" 服务时间">
                  {{ status2.finishTime }}-
                </el-descriptions-item>
                <el-descriptions-item label=" 服务备注  ">
                  {{ status2.notes }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div style="padding: 20px 0 0 0;">
            <el-button type="primary" @click="gobjfuxx(`/home/serve/treatModify`)">添加服务</el-button>
            <el-button @click="goBack()">返回</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang='ts' setup>
import * as echarts from 'echarts';
import { reactive, ref, onMounted } from 'vue'
import api from "@/api/index.ts";
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
//健康记录弹出表单
const dialogFormVisible = ref(false)
const formLabelWidth = '100px'
const form = reactive({
  type: '',
  date: '',
  num: '',
})
const goBack = () => {
  router.go(-1)
}
//跳转到发消息
const gofxx = (path: any) => {
  router.push(path)
}
//跳转到签约详情
const goqyxq = (path: any) => {
  router.push(path)
}
//添加服务跳转
const gobjfuxx = (path: any) => {
  router.push(path)
}
let datatypeList = ref()
const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('您确定删除吗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
//编辑体重
const bjtz = (arg: any) => {
  form.date = ''
  form.num = ""
  form.type = ''
  dialogFormVisible.value = true
  console.log("arg", arg);
  form.date = arg.createTime
  form.num = arg.weight
  form.type = '体重'
}
//编辑血糖
const bjxt = (arg: any) => {
  console.log("血糖", arg);
  form.date = ''
  form.num = ""
  form.type = ''
  dialogFormVisible.value = true
  console.log("arg", arg);
  form.date = arg.createTime
  form.num = arg.bloodSugar
  form.type = '血糖'
}
//编辑血压
const bjxy = (arg: any) => {
  console.log("血压", arg);
  form.date = ''
  form.num = ""
  form.type = ''
  dialogFormVisible.value = true
  console.log("arg", arg);
  form.date = arg.createTime
  form.num = arg.diastolic + "/" + arg.systolic
  form.type = '血压'
}
//编辑心率
const bjxl = (arg: any) => {
  console.log("心率", arg);
  form.date = ''
  form.num = ""
  form.type = ''
  dialogFormVisible.value = true
  console.log("arg", arg);
  form.date = arg.createTime
  form.num = arg.heartRate
  form.type = '心率'
}
//添加健康记录
const tjjkjl = () => {
  form.date = ''
  form.num = ""
  form.type = ''
  dialogFormVisible.value = true
}
//体重
let weighteChart = ref<Array<any>>([])
let weighteTimeChart = ref<Array<any>>([])
let weightTab = ref<Array<any>>([])
//血糖
let BloodSugarTab = ref<Array<any>>([])
let BloodSugarChart = ref<Array<any>>([])
let BloodSugarTimeChart = ref<Array<any>>([])
let radio1 = ref<string>('餐前')
let radio2 = ref<string>('餐前')
//血压
let BloodPressureTab = ref<Array<any>>([])
let BloodPressurediastolicChart = ref<Array<any>>([])
let BloodPressuresystolicChart = ref<Array<any>>([])
let BloodPressureTimeChart = ref<Array<any>>([])
//心率
let HeartRateTab = ref<Array<any>>([])
let HeartRateTimeChart = ref<Array<any>>([])
let HeartRateChart = ref<Array<any>>([])
/**
 * 健康档案
 */
let ResidentLabelList = ref()
//婚姻状态
let marriageM = ref<string>("")
//费用类型
let expenseM = ref<string>("")
//民族
let nationM = ref<string>("")
//户籍
let residenceM = ref<string>("")
//血型
let bloodtypeM = ref<string>("")
//体重
const weightebarChart = ref<HTMLElement>();
const myChart1 = ref<any>();
//血糖餐前
const BloodSugarChartcqChart = ref<HTMLElement>();
const myChart2 = ref<any>();
//血压
const BloodPressureChart = ref<HTMLElement>();
const myChart4 = ref<any>();
//心率
const HeartRatemmmChart = ref<HTMLElement>();
const myChart3 = ref<any>();
//居民签约信息
let ServiceList = ref({
  "id": "88579930-ee50-11ed-8059-0ba99686sd93",
  "residentId": "67e98bc0-ee1b-11ed-8459-ab11227ca877",
  "number": "20235121407123",
  "status": 3,
  "organId": "67e98bc0-ee1b-11ed-8459-c76f227ca777",
  "teamId": "88579930-ee50-11ed-8059-0ba99686cabb",
  "doctorId": "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
  "serviceId": "8000e240-828b-11ed-a736-b1a95d18c711",
  "type": "首次签约",
  "subscribeTime": "2023-05-12 14:06:11",
  "takingEffectTime": "2023-05-13 00:00:00",
  "notes": "无",
  "flag": 0,
  "resident": {
    "id": "67e98bc0-ee1b-11ed-8459-ab11227ca877",
    "number": "20215111517201",
    "name": "白素贞",
    "picture": "public/upload/ad79f331e1a460dc402dd61e394eb9ab.jpeg",
    "IDCard": "511283199102162738",
    "tel": "18844449999",
    "address": "四川省成都市都江堰青城山",
    "district": "都江堰居委会",
    "gender": 1,
    "birthday": "1991-02-16",
    "residenceId": "cf94d0f0-49dd-11ed-9052-1525a776da32",
    "nativePlace": "四川省成都市都江堰青城山",
    "residenceAddress": "四川省成都市都江堰青城山128号洞",
    "nationId": "176abd60-dcc6-11ed-b4f4-293b1f5ffbb1",
    "educationId": "7a2ef820-46ef-11ed-bbf8-c15b55eb9012",
    "maritalStatusId": "572885a0-b420-11ed-a611-3bf04a4b0d93",
    "career": "卖伞",
    "workUnit": "青城山下",
    "emergencyContact": "许仙",
    "emergencyNumber": "13466668888",
    "expenseTypeId": "c78a2a20-b41f-11ed-a611-3bf04a4b0d91",
    "designatedMedicalUnits": "四川省成都市都江堰卫生服务中心",
    "origin": "用户注册",
    "status": 0,
    "flag": 0
  },
  "team": {
    "id": "88579930-ee50-11ed-8059-0ba99686cabb",
    "number": "202359181573",
    "name": "段宏团队",
    "picture": "public/upload/63573e2a6962a.jpg",
    "organId": "67e98bc0-ee1b-11ed-8459-c76f227ca777",
    "score": 5,
    "shareCount": 0,
    "status": 0,
    "flag": 0
  },
  "service": {
    "id": "eee8000e240-828b-1123121ed-a736-b1a95d18c711",
    "name": "老人服务包",
    "typeId": "32325da0-828b-11ed-a736-b1a95d18c714",
    "price": 1600,
    "targetAudience": "60岁及以上老人",
    "period": 1,
    "renewal": 0,
    "picture": "public/upload/u4934.png",
    "description": "提供各种老年人特需服务，关爱老人健康。",
    "serviceDetail": "",
    "flag": 0
  }
});
let arr1 = ref({
  doctor: {
    id: "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
    name: "段宏",
  },
  doctorId: "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
  id: "88579930-ee50-11ed-8059-0ba99686sd93",
  number: "20235121407123",
  organ: {
    id: "67e98bc0-ee1b-11ed-8459-c76f227ca777",
    name: "成都市武侯区望江路社区卫生服务中心",
  },
  organId: "67e98bc0-ee1b-11ed-8459-c76f227ca777",
  service: {
    id: "8000e240-828b-11ed-a736-b1a95d18c711",
    name: "老人服务包",
  },
  serviceId: "8000e240-828b-11ed-a736-b1a95d18c711",
  team: {
    id: "88579930-ee50-11ed-8059-0ba99686cabb",
    name: "段宏团队",
  },
  teamId: "88579930-ee50-11ed-8059-0ba99686cabb",
})
//居民服务
let status0 = reactive({
  "id": "4oa98bc0-ee1b-11ed-8459-c76f227ca999",
  "number": "20235121912220",
  "residentId": "67e98bc0-ee1b-11ed-8459-ab11227ca877",
  "organId": "67e98bc0-ee1b-11ed-8459-c76f227ca777",
  "teamId": "88579930-ee50-11ed-8059-0ba99686cabb",
  "doctorId": "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
  "serviceId": "8000e240-828b-11ed-a736-b1a95d18c711",
  "serviceItemId": "d49f9cb0-5c07-11ed-9450-8f19ea84b625",
  "address": 1,
  "appointmentTime": "2023-07-12 13:00:00",
  "notes": "无",
  "submissionTime": "2023-05-13 10:14:11",
  "status": 0,
  "score": 5,
  "flag": 0,
  "auditTime": "2023-05-13 15:06:12",
  "checkerId": "67e98bc0-ee1b-11ed-8459-c76f227ca8f8",
  "finishTime": null,
  "organ": {
    "id": "67e98bc0-ee1b-11ed-8459-c76f227ca777",
    "name": "成都市武侯区望江路社区卫生服务中心"
  },
  "team": {
    "id": "88579930-ee50-11ed-8059-0ba99686cabb",
    "name": "段宏团队"
  },
  "doctor": {
    "id": "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
    "name": "段宏"
  },
  "service": {
    "id": "8000e240-828b-11ed-a736-b1a95d18c711",
    "name": "老人服务包"
  },
  "serviceItem": {
    "id": "d49f9cb0-5c07-11ed-9450-8f19ea84b625",
    "name": "血常规检查",
    "totalCount": 2,
    "count": 1
  }
}) //待审核
let status1 = reactive({
  "id": "4oa98bc0-ee1b-11ed-8459-c76f227ca999",
  "number": "20235121912220",
  "residentId": "67e98bc0-ee1b-11ed-8459-ab11227ca877",
  "organId": "67e98bc0-ee1b-11ed-8459-c76f227ca777",
  "teamId": "88579930-ee50-11ed-8059-0ba99686cabb",
  "doctorId": "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
  "serviceId": "8000e240-828b-11ed-a736-b1a95d18c711",
  "serviceItemId": "d49f9cb0-5c07-11ed-9450-8f19ea84b625",
  "address": 1,
  "appointmentTime": "2023-07-12 13:00:00",
  "notes": "无",
  "submissionTime": "2023-05-13 10:14:11",
  "status": 1,
  "score": 5,
  "flag": 0,
  "auditTime": "2023-05-13 15:06:12",
  "checkerId": "67e98bc0-ee1b-11ed-8459-c76f227ca8f8",
  "finishTime": null,
  "organ": {
    "id": "67e98bc0-ee1b-11ed-8459-c76f227ca777",
    "name": "成都市武侯区望江路社区卫生服务中心"
  },
  "team": {
    "id": "88579930-ee50-11ed-8059-0ba99686cabb",
    "name": "段宏团队"
  },
  "doctor": {
    "id": "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
    "name": "段宏"
  },
  "service": {
    "id": "8000e240-828b-11ed-a736-b1a95d18c711",
    "name": "老人服务包"
  },
  "serviceItem": {
    "id": "d49f9cb0-5c07-11ed-9450-8f19ea84b625",
    "name": "血常规检查",
    "totalCount": 2,
    "count": 1
  }
}) //待服务
let status2 = reactive({
  "id": "4oa98bc0-ee1b-11ed-8459-c76f227ca999",
  "number": "20235121912220",
  "residentId": "67e98bc0-ee1b-11ed-8459-ab11227ca877",
  "organId": "67e98bc0-ee1b-11ed-8459-c76f227ca777",
  "teamId": "88579930-ee50-11ed-8059-0ba99686cabb",
  "doctorId": "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
  "serviceId": "8000e240-828b-11ed-a736-b1a95d18c711",
  "serviceItemId": "d49f9cb0-5c07-11ed-9450-8f19ea84b625",
  "address": 1,
  "appointmentTime": "2023-07-12 13:00:00",
  "notes": "无",
  "submissionTime": "2023-05-13 10:14:11",
  "status": 2,
  "score": 5,
  "flag": 0,
  "auditTime": "2023-05-13 15:06:12",
  "checkerId": "67e98bc0-ee1b-11ed-8459-c76f227ca8f8",
  "finishTime": null,
  "organ": {
    "id": "67e98bc0-ee1b-11ed-8459-c76f227ca777",
    "name": "成都市武侯区望江路社区卫生服务中心"
  },
  "team": {
    "id": "88579930-ee50-11ed-8059-0ba99686cabb",
    "name": "段宏团队"
  },
  "doctor": {
    "id": "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
    "name": "段宏"
  },
  "service": {
    "id": "8000e240-828b-11ed-a736-b1a95d18c711",
    "name": "老人服务包"
  },
  "serviceItem": {
    "id": "d49f9cb0-5c07-11ed-9450-8f19ea84b625",
    "name": "血常规检查",
    "totalCount": 2,
    "count": 1
  }
}) //已完成
let status3 = reactive({
  "id": "4oa98bc0-ee1b-11ed-8459-c76f227ca999",
  "number": "20235121912220",
  "residentId": "67e98bc0-ee1b-11ed-8459-ab11227ca877",
  "organId": "67e98bc0-ee1b-11ed-8459-c76f227ca777",
  "teamId": "88579930-ee50-11ed-8059-0ba99686cabb",
  "doctorId": "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
  "serviceId": "8000e240-828b-11ed-a736-b1a95d18c711",
  "serviceItemId": "d49f9cb0-5c07-11ed-9450-8f19ea84b625",
  "address": 1,
  "appointmentTime": "2023-07-12 13:00:00",
  "notes": "无",
  "submissionTime": "2023-05-13 10:14:11",
  "status": 1,
  "score": 5,
  "flag": 0,
  "auditTime": "2023-05-13 15:06:12",
  "checkerId": "67e98bc0-ee1b-11ed-8459-c76f227ca8f8",
  "finishTime": null,
  "organ": {
    "id": "67e98bc0-ee1b-11ed-8459-c76f227ca777",
    "name": "成都市武侯区望江路社区卫生服务中心"
  },
  "team": {
    "id": "88579930-ee50-11ed-8059-0ba99686cabb",
    "name": "段宏团队"
  },
  "doctor": {
    "id": "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
    "name": "段宏"
  },
  "service": {
    "id": "8000e240-828b-11ed-a736-b1a95d18c711",
    "name": "老人服务包"
  },
  "serviceItem": {
    "id": "d49f9cb0-5c07-11ed-9450-8f19ea84b625",
    "name": "血常规检查",
    "totalCount": 2,
    "count": 1
  }
}) //已驳回
//居民签约总信息
let serviceLists = ref<Array<any>>([])
//获取居民详情信息
const postResidentLabelHealthById = async (residentId: any) => {
  const result = await api.Mdatastatistics.postResidentLabelHealthByIdApi(residentId)
  // console.log("xx", result);
  ResidentLabelList.value = result.data.data
  postChcsMaritalstatusById(ResidentLabelList.value.maritalStatusId)
  postChcsExpensetypeById(ResidentLabelList.value.expenseTypeId)
  postChcsNationById(ResidentLabelList.value.nationId)
  postChcsResidenceById(ResidentLabelList.value.residenceId)
  postChcsBloodtypeById(ResidentLabelList.value.health.bloodTypeId)
}
//根据id获取居民婚姻状态
const postChcsMaritalstatusById = async (id: string) => {
  const result = await api.Mdatastatistics.postChcsMaritalstatusByIdApi(id)
  // console.log("婚姻", result.data.data.name);
  marriageM.value = result.data.data.name
}
//根据id获取费用类型
const postChcsExpensetypeById = async (id: string) => {
  const result = await api.Mdatastatistics.postChcsExpensetypeByIdApi(id)
  // console.log("费用", result.data.data.name);
  expenseM.value = result.data.data.name
}
//根据id获取名族
const postChcsNationById = async (id: string) => {
  const result = await api.Mdatastatistics.postChcsNationByIdApi(id)
  // console.log("民族", result.data.data.name);
  nationM.value = result.data.data.name
}
//根据id获取户籍
const postChcsResidenceById = async (id: string) => {
  const result = await api.Mdatastatistics.postChcsResidenceByIdApi(id)
  // console.log("户籍", result.data.data.name);
  residenceM.value = result.data.data.name
}
//根据id获取居民血型
const postChcsBloodtypeById = async (id: string) => {
  const result = await api.Mdatastatistics.postChcsBloodtypeByIdApi(id)
  // console.log("血型", result.data.data.name);
  bloodtypeM.value = result.data.data.name
}

//根据id获取体重
const postWeightByResidentId = async () => {
  const result = await api.Mdatastatistics.postWeightByResidentIdApi()
  // console.log("体重", result.data.data);
  weightTab.value = result.data.data
  result.data.data.forEach((item: any) => {
    weighteChart.value.push(item.weight)
    weighteTimeChart.value.push(item.createTime.slice(6, 10))
    initBarEcharts()
  });
  // console.log("weighteChart.value", [...weighteChart.value]);
  // console.log("weighteChart.value", [...weighteTimeChart.value]);
}

// 绘制柱形图体重
function initBarEcharts() {
  myChart1.value = echarts.init(weightebarChart.value!);
  myChart1.value.setOption({
    title: {
      text: '体重趋势',
      x: 'left',
      textStyle: {
        fontSize: 14,
        fontWeight: 400
      },
      subtext: "单位：kg",
      subtextStyle: {
        fontSize: 10,
        color: "#999",
      },
    },
    tooltip: {
      trigger: 'item'
    },
    grid: {
      top: '20%', // 设置图表上边距为 10%
      left: '3%',
      right: '4%',
      bottom: '0',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [...weighteTimeChart.value],
      axisLine: {
        lineStyle: {
          color: '#999' // 设置 x 轴线颜色为 #999
        }
      },
      axisLabel: {
        textStyle: {
          color: '#999' // 设置 x 轴数据的颜色为 #999
        }
      },

    },
    yAxis: {
      min: Math.min(...weighteChart.value),
      axisLabel: {
        show: false // 关闭 y 轴的数据显示
      },
      axisLine: {
        show: false // y 轴线消失
      },
      axisTick: {
        show: false, // y 轴坐标点消失
      },
    },
    color: ['#2F83F3'],
    series: [
      {
        name: '体重',
        type: 'line',
        smooth: true,//平滑曲线
        data: [...weighteChart.value],
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  });
}
//
const cqClick = () => {
  postBloodSugarByResidentId(1)
}
const chClick = () => {
  postBloodSugarByResidentId(123)
}
const cqTabClick = () => {
  postBloodSugarByResidentId2(1)
}
const chTabClick = () => {
  postBloodSugarByResidentId2(123)
}

//获取血糖
const postBloodSugarByResidentId = async (flag: number) => {
  const result = await api.Mdatastatistics.postBloodSugarByResidentIdApi()
  // console.log("血糖", result.data.data);
  BloodSugarChart.value = []
  if (flag == 1) {
    result.data.data.forEach((item: any) => {
      BloodSugarTimeChart.value.push(item.createTime.slice(6, 10))
      if (item.recordTime === 0) {
        BloodSugarChart.value.push(item.bloodSugar)
      }
      // console.log("BloodSugarTab.value", BloodSugarTab.value);
    });
  }
  else {
    result.data.data.forEach((item: any) => {
      BloodSugarTimeChart.value.push(item.createTime.slice(6, 10))
      if (item.recordTime === 1) {
        BloodSugarChart.value.push(item.bloodSugar)
      }
    });
  }

  BloodSugarcqEcharts()
}
//获取血糖
const postBloodSugarByResidentId2 = async (flags: number) => {
  const result = await api.Mdatastatistics.postBloodSugarByResidentIdApi()
  BloodSugarTab.value = []
  if (flags == 1) {
    result.data.data.forEach((item: any) => {
      BloodSugarTimeChart.value.push(item.createTime.slice(6, 10))
      if (item.recordTime === 0) {
        BloodSugarTab.value.push(item)
      }
      // console.log("BloodSugarTab.value", BloodSugarTab.value);
    });
  }
  else {
    result.data.data.forEach((item: any) => {
      BloodSugarTimeChart.value.push(item.createTime.slice(6, 10))
      if (item.recordTime === 1) {
        BloodSugarTab.value.push(item)
      }
    });
  }
}
// 餐前血糖图表
function BloodSugarcqEcharts() {
  myChart2.value = echarts.init(BloodSugarChartcqChart.value!);
  myChart2.value.setOption({
    title: {
      text: '血糖趋势',
      x: 'left',
      textStyle: {
        fontSize: 14,
        fontWeight: 400
      },
      subtext: "单位：mmol/L",
      subtextStyle: {
        fontSize: 10,
        color: "#999",
      },
    },
    tooltip: {
      trigger: 'item'
    },
    grid: {
      top: '20%', // 设置图表上边距为 10%
      left: '3%',
      right: '4%',
      bottom: '0',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [...new Set(BloodSugarTimeChart.value)],
      axisLine: {
        lineStyle: {
          color: '#999' // 设置 x 轴线颜色为 #999
        }
      },
      axisLabel: {
        textStyle: {
          color: '#999' // 设置 x 轴数据的颜色为 #999
        }
      },

    },
    yAxis: {
      min: Math.min(...BloodSugarChart.value),
      axisLabel: {
        show: false // 关闭 y 轴的数据显示
      },
      axisLine: {
        show: false // y 轴线消失
      },
      axisTick: {
        show: false, // y 轴坐标点消失
      },
    },
    color: ['#727BF4'],
    series: [
      {
        name: '血糖',
        type: 'line',
        smooth: true,//平滑曲线
        data: [...BloodSugarChart.value],
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  });
}
//获取血压数据
const postBloodPressureByResidentId = async () => {
  const result = await api.Mdatastatistics.postBloodPressureByResidentIdApi()
  // console.log("血压", result.data.data);
  BloodPressureTab.value = result.data.data
  result.data.data.forEach((item: any) => {
    BloodPressurediastolicChart.value.push(item.diastolic)
    BloodPressuresystolicChart.value.push(item.systolic)
    BloodPressureTimeChart.value.push(item.createTime.slice(6, 10))
  });
  // console.log(BloodPressurediastolicChart.value, '/', BloodPressuresystolicChart.value, BloodPressureTimeChart.value);
  BloodPressureEcharts()
}
// 绘制柱形图血压
function BloodPressureEcharts() {
  myChart4.value = echarts.init(BloodPressureChart.value!);
  myChart4.value.setOption({
    title: {
      text: '血压趋势',
      x: 'left',
      textStyle: {
        fontSize: 14,
        fontWeight: 400
      },
      subtext: "单位：mmHg",
      subtextStyle: {
        fontSize: 10,
        color: "#999",
      },
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      data: ['舒张压', '收缩压']
    },
    grid: {
      top: '20%', // 设置图表上边距为 10%
      left: '3%',
      right: '4%',
      bottom: '0',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [...BloodPressureTimeChart.value],
      axisLine: {
        lineStyle: {
          color: '#999' // 设置 x 轴线颜色为 #999
        }
      },
      axisLabel: {
        textStyle: {
          color: '#999' // 设置 x 轴数据的颜色为 #999
        }
      },

    },
    yAxis: {
      min: Math.min(...BloodPressuresystolicChart.value),
      axisLabel: {
        show: false // 关闭 y 轴的数据显示
      },
      axisLine: {
        show: false // y 轴线消失
      },
      axisTick: {
        show: false, // y 轴坐标点消失
      },
    },
    color: ['#4CD7AE', '#FDDE83'],
    series: [
      {
        name: '舒张压',
        type: 'line',
        smooth: true,//平滑曲线
        data: [...BloodPressurediastolicChart.value],
        label: {
          show: true,
          position: 'top'
        }
      },
      {
        name: '收缩压',
        type: 'line',
        smooth: true,//平滑曲线
        data: [...BloodPressuresystolicChart.value],
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  });
}
//获取心率数据
const postHeartRateByResidentId = async () => {
  const result = await api.Mdatastatistics.postHeartRateByResidentIdApi()
  // console.log("心率", result.data.data);
  HeartRateTab.value = result.data.data
  result.data.data.forEach((item: any) => {
    HeartRateTimeChart.value.push(item.createTime.slice(6, 10))
    HeartRateChart.value.push(item.heartRate)
  });
  HeartRateEcharts()
}
// 绘制柱形图心率
function HeartRateEcharts() {
  myChart3.value = echarts.init(HeartRatemmmChart.value!);
  myChart3.value.setOption({
    title: {
      text: '心率趋势',
      x: 'left',
      textStyle: {
        fontSize: 14,
        fontWeight: 400
      },
      subtext: "单位：bmp",
      subtextStyle: {
        fontSize: 10,
        color: "#999",
      },
    },
    tooltip: {
      trigger: 'item'
    },
    grid: {
      top: '20%', // 设置图表上边距为 10%
      left: '3%',
      right: '4%',
      bottom: '0',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [...HeartRateTimeChart.value],
      axisLine: {
        lineStyle: {
          color: '#999' // 设置 x 轴线颜色为 #999
        }
      },
      axisLabel: {
        textStyle: {
          color: '#999' // 设置 x 轴数据的颜色为 #999
        }
      },

    },
    yAxis: {
      min: Math.min(...HeartRateChart.value),
      axisLabel: {
        show: false // 关闭 y 轴的数据显示
      },
      axisLine: {
        show: false // y 轴线消失
      },
      axisTick: {
        show: false, // y 轴坐标点消失
      },
    },
    color: ['#FA7C73'],
    series: [
      {
        name: '心率',
        type: 'line',
        smooth: true,//平滑曲线
        data: [...HeartRateChart.value],
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  });
}

/*
**签约信息
*/
//根据居民id查询生效签约的机构团队医生服务包
const postOTDSByResidentId = async (id: string) => {
  const result = await api.Mdatastatistics.postOTDSByResidentIdApi(id)
  console.log("团队", result.data.data);
  arr1.value = result.data.data
}
const postServiceByRId = async (id: any) => {
  const result = await api.Mdatastatistics.postServiceByRIdApi(id)
  ServiceList.value = result.data.data[0]
  serviceLists.value = result.data.data
  // console.log("签约信息", result.data.data);
}

//根据居民id获取服务记录
const postSDOTDSSIByResidentId = async (id: string) => {
  const result = await api.Mdatastatistics.postSDOTDSSIByResidentIdApi(id)
  console.log("服务", result.data.data);
  result.data.data.forEach((item: any) => {
    // console.log("item", item);
    if (item.status === 0) {
      status0 = item
      console.log("status0", status0);

    } else if (item.status === 1) {
      status1 = item
      console.log("status1", status1);
    } else if (item.status === 2) {
      status2 = item
      console.log("status2", status2);
    } else if (item.status === 3) {
      status3 = item
      console.log("status3", status3);
    }

  })

}

//获取数据类型
const postdatatype = async () => {
  const result = await api.Mdatastatistics.postdatatypeApi()
  datatypeList.value = result.data.data

}




onMounted(() => {
  console.log(route.params.id);
  postWeightByResidentId()
  postBloodSugarByResidentId(1)
  postBloodSugarByResidentId2(1)
  postBloodPressureByResidentId()
  postHeartRateByResidentId()
  postServiceByRId(route.params.id)
  postOTDSByResidentId(route.params.id)
  postSDOTDSSIByResidentId(route.params.id)
  //获取居民详情信息
  postResidentLabelHealthById(route.params.id)
  postdatatype()
})

</script>

<style lang='scss' >
.jmxq-box {
  @include BoxStyle;

  .Profile-List {
    @include dataList;
  }

  .card-box {
    margin: 20px 0;
  }

  .el-descriptions {
    margin-top: 20px;
  }

  .content {
    .el-descriptions {
      .el-descriptions__body {
        display: flex;
        height: 240px;
      }
    }
  }


  .el-descriptions__label {
    width: 80px;
    text-align: right;
    color: #999999;
    display: inline-block;
    font-size: 13px;
  }

  .el-descriptions__content {

    // width: 150px;
    display: inline-block;
    font-size: 13px;
    vertical-align: middle;
  }
}

img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
}

.jtcy-box {
  .jmxq-box .el-descriptions__content {
    width: 300px;
  }

  img {
    width: 40px;
    height: 40px;
  }

  img:last-of-type {
    width: 10px;
    height: 15px;
    transform: rotate(330deg);
  }


}

.el-descriptions__title {
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: 400;
}
</style>